<template>
  <div>
    <!-- 操作区域 -->
    <div class="tab-style-default">
      <el-tabs v-model="activeName" class="member-list-tab" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="普通顾客" name="2"></el-tab-pane>
        <el-tab-pane label="分销商" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="top-operate">
      <div>
        <el-input style="width: 200px;" v-model="memberListQuery.nickname" placeholder="顾客或店主姓名/昵称/手机号"></el-input>
        <el-date-picker
          style="margin-left: 10px"
          v-model="starEndTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
        <el-button plain="" @click="resetSearch">重置</el-button>
      </div>
    </div>
    <div class="table-container">
      <el-table :data="memberList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column min-width="240px" label="微客" prop="userInfo" fixed="left">
          <template slot-scope="scope">
            <div @click="handleUpdate(scope.row)" class="flex v-align-c cursor-p">
              <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
              <div class="font-14 pad-l-10">
                <div>昵称：{{scope.row.nickname}}</div>
                <div>姓名：{{scope.row.realName}}</div>
                <div>手机：{{scope.row.phone}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.shareType === 1">分销商</span>
            <span v-if="scope.row.shareType === 2">普通顾客</span>
          </template>
        </el-table-column>
        <el-table-column width="209px" label="注册时间" prop="taskRegisteredTime" sortable="custom" >
          <template slot-scope="scope">
            <span>{{scope.row.registeredTime}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="成交">
          <template slot-scope="scope">
            <span>订单：{{scope.row.dealOrderNum}}</span><br/>
            <span>金额：{{scope.row.dealOrderPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="分销">
          <template slot-scope="scope">
            <span>订单：{{scope.row.projectOrderNum}}</span><br/>
            <span>金额：{{scope.row.projectOrderPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="备注" prop="remarkName" >
        </el-table-column>
        <el-table-column width="140px" label="操作" align="right" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="memberListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="memberListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style scoped>
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { pagingCustomerMember } from '@/api/user/member'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      memberId: {
        type: String
      }
    },
    data() {
      return {
        basicStatus: '0',
        memberList: [],
        textCol: 'nickname',
        textValue: '',
        starEndTime: [],
        th_memberList: [],
        authFlagList: [],
        natureList: [],
        authFlagType: '',
        activeName: '0',
        total: null,
        listLoading: true,
        multipleSelection: [],
        memberListQuery: {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          nature: '',
          taskStatus: '',
          authFlag: '',
          enterpriseId: '',
          recruiterId: ''
        },
        member: {
          memberId: '',
          nickname: '',
          realName: '',
          nature: '',
          memberGrade: '',
          labelName: '',
          phone: '',
          taskRegisteredTime: '',
          authFlag: '',
          taskStatus: '',
          delFlag: '',
          enterpriseId: '',
          status: '0'
        },
        natureStyleMap: {
          0: 'font-yellow',
          1: 'font-blue',
          2: 'font-green'
        },
        authFlagStyleMap: {
          0: 'font-orange',
          1: 'font-green'
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.queryParams = this.getCurrentPage().query
      if (this.queryParams && this.queryParams.recruiterId) {
        this.memberListQuery.recruiterId = this.queryParams.recruiterId.toString()
      }
      this.initMemberList()
    },
    methods: {
      initMemberList() {
        this.listLoading = true
        this.memberListQuery['shareType'] = this.activeName
        if (this.starEndTime && this.starEndTime.length > 0) {
          this.memberListQuery['startDate'] = this.starEndTime[0]
          this.memberListQuery['endDate'] = this.starEndTime[1]
        } else {
          this.memberListQuery['startDate'] = ''
          this.memberListQuery['endDate'] = ''
        }
        this.memberListQuery.enterpriseId = this.getEnterpriseId()
        this.memberListQuery.memberId = this.memberId
        pagingCustomerMember(this.memberListQuery).then(response => {
          if (response.isError) return
          this.memberList = response.data.records
          if (this.memberList) {
            for (let i = 0; i < this.memberList.length; i++) {
              this.memberList[i].userInfo = {}
              this.memberList[i].userInfo.avatar = this.memberList[i].avatar
              this.memberList[i].userInfo.nickname = this.memberList[i].nickname
              this.memberList[i].userInfo.realName = this.memberList[i].realName
              this.memberList[i].natureStyle = this.natureStyleMap[this.memberList[i].nature]
              this.memberList[i].authFlagStyle = this.authFlagStyleMap[this.memberList[i].authFlag]
            }
          }
          if (this.memberList != null && this.memberList.length > 0) {
            if (response.data.dict.authFlag != null) {
              this.authFlagList = response.data.dict.authFlag
              this.authFlagList[''] = '实名状态'
            }
            if (response.data.dict.nature != null) {
              this.natureList = response.data.dict.nature
            }
          }
          this.total = response.data.total
          this.listLoading = false
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.memberListQuery.ascs = 'createTime'
            this.memberListQuery.descs = ''
          } else {
            this.memberListQuery.ascs = ''
            this.memberListQuery.descs = 'createTime'
          }
        }
        this.initMemberList()
      },
      handleClick() {
        this.initMemberList()
      },
      handleSearch() {
        this.memberListQuery.currentPage = 1
        this.memberListQuery.authFlag = this.authFlagType
        this.initMemberList()
      },
      resetSearch() {
        this.searchReset()
        this.initMemberList()
      },
      searchReset() {
        this.memberListQuery = {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          nature: '',
          taskStatus: '',
          authFlag: '',
          memberId: ''
        }
        this.starEndTime = []
      },
      handleSizeChange(val) {
        this.memberListQuery.size = val
        this.initMemberList()
      },
      handleCurrentChange(val) {
        this.memberListQuery.currentPage = val
        this.initMemberList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        this.th_memberList = []
      },
      // 详情
      handleUpdate(row) {
        this.$router.push({ path: '/user/member-customer/details/index', query: { memberId: this.memberId, customerMemberId: row.memberId }})
      }
    },
    mounted() {

    }
  }
</script>
